<template>
    <view class="">
		<radio-group class="block flex1 tal" @change="PickerChange">
			<view @click="tab(item.id)" class="pad2 flrc round pos-r" v-for="item in picker">
				<view class="padr3 flex1 round padl3">{{item.value}}</view>
				<view><radio v-model="valueInside" :class="cur == item.id?'checked':''" :checked="cur == item.id?'checked':false"  :value="item.id"></radio></view>
				<ripple></ripple>
			</view>
		</radio-group>
    </view>
</template>

<script>
    export default {
        name: "sradio",
        props: {
            value: '',
			model:'',
			label:'',
			placeholder:'',
			condtion:'',
			isId:{
				type:Boolean,
				default:false
			}
        },
        data() {
            return {
                picker: [],
				valueInside:'',
				cur:''
            }
        },
        methods: {
            PickerChange(e) {
				this.log(e)
				// if(this.index === -1){this.index = 0}else{this.index = e.detail.value}
				this.cur = e.detail.value
				this.$emit('input',e.detail.value)
				// this.$emit('input',this.picker[this.index].id)
            },
			tab(val){
				// if(this.index === -1){this.index = 0}else{this.index = e.detail.value}
				this.cur = val
				this.$emit('input',val)
			},
			reload(){
				let condtion = {}
				if(this.$com.isbool(this.condtion)){
					condtion = this.condtion
				}
				this.$api.get("/admin/" + this.model + '/choice',condtion,(res)=>{
					this.picker = res.d
					if(this.$com.isbool(this.value)){
						this.picker.map((data,index)=>{
							if(data.id === this.value){this.index = index}
						})
					}
				})
			}
        },
        mounted() {
			this.cur = this.value
			this.reload()
        },
		watch:{
			value(curVal,oldVal){
				this.log(curVal)
				this.cur = curVal
				if(this.$com.isbool(curVal)){
					this.picker.map((data,index)=>{
						if(data.id === curVal){this.index = index}
					})
				}
			},
			index(curVal,oldVal){
				if(this.$com.isbool(curVal)){
					this.picker.map((data,index)=>{
						if(data.id === curVal){this.index = index}
					})
				}
			},
			condtion(curVal){
				this.reload()
			}
		}
    }
</script>

<style>
    .cu-form-group .title {
    	min-width: calc(4em + 15px);
    }
</style>
